<!-- 加油充值订单详情页 -->
<template>
  <view class="bigbox">
    <LoadingOverlay
      v-model="loadingStatus"
      :text="loadingText"
      :size="60"
      color="#ff6c18"
    />
    <view class="content">
      <view class="box1">
        <!-- 重新加载图标 -->
         <view class="bt">
          {{ oilInfo.stationName }}
         </view>
        <u-icon
          name="reload"
          size="40"
          @click="getOrderInfo"
          style="cursor: pointer"
        ></u-icon>
      </view>
      <view class="smallbox">
        <view class="bt">商品信息 </view>
        <view class="nr">
          <view class="txbox">
            <view>油号</view>
            <view>{{ oilInfo.oilName }}</view>
          </view>
          <view class="txbox">
            <view>单价</view>
            <view>￥{{ oilInfo.actualPrice }} /升</view>
          </view>
          <view class="txbox">
            <view>油量</view>
            <view>{{ oilInfo.liters }} 升</view>
          </view>
          <view class="txbox" v-if="orderInfo.orderMonies&&orderInfo.orderMonies.length > 0">
            <view>商品价格</view>
            <view class="jgwz">￥{{ orderInfo.orderMonies[0].money }}</view>
          </view>
        </view>
      </view>
      <view class="smallbox">
        <view class="bt">优惠信息 </view>
        <view class="nr">
          <view class="txbox">
            <view>订单金额</view>
            <view class="jgwz">￥{{ orderInfo.money }}</view>
          </view>
          <view class="txbox">
            <view>
              <!-- {{ enumAll.SHOPMODEL[orderInfo.shopMode] }} -->
              复来券
            </view>
            <view class="jgwz">-￥{{ scoreMoneyAll }} <text v-if="orderInfo.status == 92">(已原路退回)</text></view>
          </view>
          <view class="txbox" v-if="orderInfo.shopMode == 4">
            <view>服务费</view>
            <view class="jgwz">{{ orderInfo.otherMoney }}</view>
          </view>

          <view class="txbox">
            <view class="bt">实付金额</view>
            <view class="jgwz">￥{{ payPrice }}<text v-if="orderInfo.status == 92">(已原路退回)</text></view>
          </view>
        </view>
      </view>
      <view class="smallbox">
        <view class="bt">订单信息 </view>
        <view class="nr">
          <view class="txbox">
            <view>订单编号</view>
            <view>
              {{ orderInfo.orderNo }}
              <u-button
                plain
                hairline
                size="mini"
                type="success"
                @click="handleCopy"
                >复制</u-button
              >
            </view>
          </view>
          <view class="txbox">
            <view>创建时间</view>
            <view>
              {{ formatTimestamp(orderInfo.createTime) }}
              <!-- 2025-09-23 -->
            </view>
          </view>
          <view class="txbox" v-if=" orderInfo.user">
            <view>用户电话</view>
            <view>{{ orderInfo.user.phone }}</view>
          </view>
          <view class="txbox" v-if=" orderInfo.user">
            <view>用户昵称</view>
            <view>{{ orderInfo.user.nickname }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive, ref, computed, nextTick, watch } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { formatTimestamp, dateFormat } from '@/utils/index'
import { moneyUtils } from '@/utils/money'
import { enumAll, orderApi } from '@/api'
//组件
import LoadingOverlay from '@/components/hy-loadingPage/index.vue'
const orderInfo = ref<any>({})
const oilInfo = ref<any>({})
const orderId = ref<any>(0)
const isApp = ref(false)
const loadingStatus = ref(false)
const loadingText = ref('正在加载...')
const payPrice = ref()//实付
const scoreMoneyAll = ref()//实付
// 页面加载时检查协议状态
onLoad(async (option: any) => {
  // console.log('订单接收option', option)
  orderId.value = option.orderId
  if (option?.from && option.from.toLowerCase() === 'app') {
    isApp.value = true
  }
  if (orderId.value) {
    getOrderInfo()
  }
})
//获取单个订单数据
const getOrderInfo = async () => {
  loadingStatus.value =  true
  try {
    const result = await orderApi.orderInfo({
      detail: true,
      id: orderId.value
    })
    const { data, code } = result as any

    console.log('获取单个订单', data)

    orderInfo.value = data
    oilInfo.value = data.oilInfo
    payPrice.value =  moneyUtils.subtractMultiple(data.totalMoney, [data.scoreMoney,data.discountMoney])
    scoreMoneyAll.value = moneyUtils.addPrice(data.scoreMoney,0)
  } catch (e) {
    console.log('获取orderInfo错误', e)
  } finally {
    loadingStatus.value = false
  }
}
const handleCopy = () => {
  const orderNo = orderInfo.value.orderNo
  if (orderNo) {
    uni.setClipboardData({
      data: orderNo,
      success: () => {
        uni.showToast({ title: '复制成功' })
      },
      fail: () => {
        uni.showToast({ title: '复制失败', icon: 'none' })
      }
    })
  } else {
    uni.showToast({ title: '订单编号为空', icon: 'none' })
  }
}
 
</script>
<style lang="scss" scoped>
.bigbox {
  font-size: 28rpx;
  background: linear-gradient(
    to bottom,
    #f9dcb8 5%,
    #faead7 25%,
    #f8f8f8 85%,
    #f5f5f5 100%
  );
  min-height: 100vh;
  padding: 20rpx;
  .content {
    margin-top: 50rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      text-align: right;
    }
    .smallbox {
      padding: 20rpx;
      > view {
        margin-bottom: 20rpx;
      }
    
    }
  }
}
.txbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  > view {
    margin-bottom: 20rpx;
  }
}
.jgwz {
  color: red;
  font-size: 30rpx;
  //   font-weight: bold;
}
.overwz {
  //   单行文本省略号
  width: 100%;
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
}

.bt {
        font-size: 32rpx;
        font-weight: bold;
      }
</style>
